<template>
	<div class="box flex position-relative justify-center align-center">
		<div class="left bg-white"></div>
		<div class="right"></div>
		<div class="position-absolute center_login flex flex-column">
			<div class="flex-2 flex align-center justify-center">
				<p class="itemText">登录/注册页面</p>
			</div>
			<div class="flex-1 flex flex-column align-center">
				<input type="text" class="input_text" placeholder="用户账号" v-model="loginName">
				<input type="password" class="input_text" placeholder="用户密码" v-model="loginPwd">
			</div>
			<div class="flex-2 flex flex-column align-center">
				<div class="goClick mt-5 flex align-center justify-center cursor-pointer" @click="login">
					<p class="item_jian">登录</p>
				</div>
				<div class="flex justify-center mt-4" style="width: 12vw;">
					<p class="itemzuce">注册</p>
				</div>
			</div>
		</div>
	</div>
		
</template>

<script>
	import {login,regtis} from '../api/user.js'
	export default {
		data(){
			return{
				loginName:'',
				loginPwd:'',
			}
		},
		methods:{
			async login(){
				console.log(this.loginName)
				console.log(this.loginPwd)
				const params = new URLSearchParams() 
				params.append("username",this.loginName)
				params.append("pwd",this.loginPwd)
				let res = await login(params)
				console.log("--------->",res)
				if(res.data.code==200){
					 this.$router.push("/home")
				}
			}
		},
	}
</script>

<style scoped>
	@import url("../common/common.css");
	*{padding: 0;margin: 0;}
	.box{
		width: 100vw;
		height: 100vh;
		
	}
	.left{
		width: 50vw;
		height: 100vh;
		background-color: #7AB5B6;
	}
	.right{
		width: 50vw;
		height: 100vh;
		background-color: #E4D0A9;
	}
	.center_login{
		width: 35vw;
		height: 85vh;
		background-color: white;
		box-shadow: 10px 10px 10px  #494F54;
	}
	.itemText{
		font-size: 50px;
		font-weight: bold;
	}
	.input_text{
		border: none;
		outline: none;
		border-bottom: 1px solid #a9acac;
		width: 20vw;
		height: 70px;
		font-size: 25px;
	}
	.goClick{
		width: 12vw;
		height: 60px;
		background-color: #EDF6F5;
		cursor:pointer;
	}
	.item_jian{
		font-size: 30px;
		color: #7AB5B6;
	}
	.itemzuce{
		font-size: 25px;
		color: #D9BF8D;
	}
	
</style>
